<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/stores/user'
import { showToast } from 'vant';

import BiNavBar from '@/components/bi-navbar/index.vue'
import { submitApplicationWithdrawal } from '@/api/withdraw'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const paypalAccount = ref('')
const handleApplyWithdrawal = async () => {
    if (paypalAccount.value.length === 0) {
        showToast('The Paypal account cannot be empty')
        return
    }
    try {
        const res = await submitApplicationWithdrawal({
            device: userStore.device,
            amount: route.query.amount as string,
            payeeAccount: paypalAccount.value
        })
        showToast(res.data.data)
        setTimeout(() => {
            localStorage.setItem('withdraw', '1')
            router.push({ path: '/index', query: { device: userStore.device } })
        }, 2800)
    } catch (error) {
        console.error(error)
    }
}
</script>

<template>
    <div class="input">
        <BiNavBar title="Exchange" @click-left="router.back">
            <template v-slot:center>
                <div class="paypal-logo">
                    <img src="@/assets/imgs/exchange/logo.png" alt="paypal" width="150">
                </div>
            </template>
        </BiNavBar>
        <div class="account">
            <input class="account_input" type="text" placeholder="Email or mobile number" v-model="paypalAccount">
        </div>
        <div class="button" @click="handleApplyWithdrawal">DONE</div>
    </div>
</template>

<style scoped lang="scss">
.paypal-logo {
    width: 34vmin;
    height: 12vmin;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.input {
    width: 100%;
    height: 100%;
    background-color: var(--main-color);

    .account {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: 0 auto;

        &_input {
            width: 100%;
            font-size: var(--normal-font-size);
            padding: 2vmin 5vmin;
            border-radius: 1vmin;
        }
    }

    .button {
        @extend .account;
        height: 10vmin;
        font-size: var(--small-font-size);
        background-color: #fff;
        border-radius: 999px;
        margin-top: 5vmin;
        color: var(--main-color);
    }
}
</style>